<template>
  <div class="usereq">
    <form-row :gutter="10">
      <!-- 左边 -->
      <form-col :span="12">
        <div class="left_content">
          <form-row :gutter="10">
            <form-col :span="7" style="margin: 10px 0"> 当前迭代 </form-col>
          </form-row>
          <form-row
            :gutter="10"
            style="
              padding: 10px 0;
              margin-bottom: 0;
              border-top: 1px solid #ccc;
              border-bottom: 1px solid #ccc;
            "
          >
            <form-col class="center" :span="3"
              ><el-checkbox
                class="grid-content able_checkbox"
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              ></form-col
            >
            <span style="margin-left: 120px"
              >用户故事：{{ equipmentInfo.length }}</span
            >
            <span style="margin-left: 150px">故事点：{{ Story }}</span>
          </form-row>
          <el-checkbox-group
            v-model="checkedleft"
            @change="handleCheckedLeftChange"
          >
            <form-row
              v-for="(equipmentInfos, index) in equipmentInfo"
              :key="index"
              :gutter="10"
              style="margin: 0; padding: 10px 0; border-bottom: 1px solid #ccc"
            >
              <div v-if="equipmentInfos.status === '2'">
                <form-col class="center" :span="8">
                  <el-checkbox
                    :label="equipmentInfos"
                    :key="equipmentInfos.title"
                  ></el-checkbox>
                </form-col>
                <form-col :span="3" class="suceess"
                  ><div class="grid-content grid-Prohibit">
                    {{ equipmentInfos.title }}
                  </div></form-col
                >
                <form-col :span="5"
                  ><div class="grid-content grid-Prohibit">
                    {{ equipmentInfos.priority }}
                  </div></form-col
                >
                <form-col :span="3"
                  ><div class="grid-content grid-Prohibit">
                    {{ equipmentInfos.storyPoint }}
                  </div></form-col
                >
                <form-col :span="1"
                  ><div class="grid-content grid-Prohibit">
                    {{ equipmentInfos.warn }}
                  </div></form-col
                >
              </div>
              <div v-else>
                <form-col class="center" :span="3">
                  <el-checkbox
                    class="able_checkbox"
                    :label="equipmentInfos"
                    :key="equipmentInfos.title"
                  ></el-checkbox>
                </form-col>
                <form-col :span="14"
                  ><div class="grid-content">
                    {{ equipmentInfos.title }}
                  </div></form-col
                >
                <form-col :span="3"
                  ><div class="grid-content">
                    {{ equipmentInfos.priority }}
                  </div></form-col
                >
                <form-col :span="2"
                  ><div class="grid-content">
                    {{ equipmentInfos.storyPoint }}
                  </div></form-col
                >
              </div>
            </form-row>
          </el-checkbox-group>
        </div>
        <!-- 按钮 -->
        <div class="center_content">
          <div class="center_content_r">
            <div
              class="rule_btn rule_btn_left"
              icon="el-icon-plus"
              type="warning"
              @click="PutDataToRight()"
            >
              移除迭代
            </div>
            <div
              style="margin-top: 20px"
              class="rule_btn rule_btn_right"
              icon="el-icon-plus"
              type="warning"
              @click="PutDataToLeft()"
            >
              移入迭代
            </div>
          </div>
        </div>
      </form-col>
      <!-- 右边 -->
      <form-col :span="12">
        <div class="left_content">
          <form-row
            :gutter="10"
            style="
              padding: 10px 0;
              margin-bottom: 0;
              border-bottom: 1px solid #ccc;
            "
          >
            <form-col class="center" :span="3" style="margin-top: 40px"
              ><el-checkbox
                class="grid-content able_checkbox"
                :indeterminate="risIndeterminate"
                v-model="rcheckAll"
                @change="rhandleCheckAllChange"
                >全选</el-checkbox
              ></form-col
            >
            <form-col :span="8" style="margin-top: 43px"
              ><div class="grid-content">工作项</div></form-col
            >
            <form-col :span="8" style="margin-top: 43px"
              ><div class="grid-content">优先级</div></form-col
            >
            <form-col :span="4" style="margin-top: 43px"
              ><div class="grid-content">故事点</div></form-col
            >
          </form-row>
          <el-checkbox-group
            v-model="rcheckedleft"
            @change="rhandleCheckedLeftChange"
          >
            <form-row
              v-for="(userStorys, index) in requipmentInfo"
              :key="index"
              :gutter="10"
              style="margin: 0; padding: 10px 0; border-bottom: 1px solid #ccc"
            >
              <form-col class="center" :span="3">
                <el-checkbox
                  class="able_checkbox"
                  :label="userStorys"
                  :key="userStorys.title"
                ></el-checkbox>
              </form-col>
              <form-col :span="9"
                ><div class="grid-content">
                  {{ userStorys.title }}
                </div></form-col
              >
              <form-col :span="6"
                ><div class="grid-content">
                  {{ userStorys.priority }}
                </div></form-col
              >
              <form-col :span="6"
                ><div class="grid-content">
                  {{ userStorys.storyPoint }}
                </div></form-col
              >
            </form-row>
          </el-checkbox-group>
        </div>
      </form-col>
    </form-row>
  </div>
</template>

<script>
export default {
  props: ["rows"],
  inject: ["reload1"],
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkedleft: [],
      rcheckAll: false,
      risIndeterminate: true,
      rcheckedleft: [],
      condition_area: "",
      condition_areaArr: [],
      equipmentInfo: [],
      requipmentInfo: "",
    };
  },
  watch: {
    //计算当前迭代的故事点
    equipmentInfo: {
      immediate: true,
      handler() {
        this.fu();
      },
    },
    //展示当前迭代的用户故事
    rows: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.$http({
            method: "post",
            url: `userStory/selectAllUserStory?spurtId=${newVal.id}`,
          }).then(({ data }) => {
            if (data.flag) {
              this.equipmentInfo = data.data;
            } else {
              console.log(data);
            }
          });
        }
      },
    },
  },
  methods: {
    //计算当前迭代的故事点
    fu() {
      let t = 0;
      this.equipmentInfo.forEach((item) => {
        t = t + item.storyPoint;
      });
      this.Story = t;
    },
    //全选按钮
    handleCheckAllChange(val) {
      //val为布尔值
      this.checkedleft = val ? this.equipmentInfo : [];
      this.isIndeterminate = false;
    },
    //单选按钮
    handleCheckedLeftChange(v) {
      //v是输出当前用户故事 v.length 表示勾选了几个用户故事
      const checkedCount = v.length;
      this.checkAll = checkedCount === this.equipmentInfo.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.equipmentInfo.length;
    },
    rhandleCheckAllChange(val) {
      this.rcheckedleft = val ? this.requipmentInfo : [];
      this.risIndeterminate = false;
    },
    rhandleCheckedLeftChange(v) {
      const checkedCount = v.length;
      this.rcheckAll = checkedCount === this.requipmentInfo.length;
      this.risIndeterminate =
        checkedCount > 0 && checkedCount < this.requipmentInfo.length;
    },
    //将数据移动到右边
    PutDataToRight() {
      this.Toremove(JSON.parse(JSON.stringify(this.checkedleft)));
      console.log(JSON.parse(JSON.stringify(this.checkedleft)));
      this.requipmentInfo = this.handleConcatArr(
        this.requipmentInfo,
        this.checkedleft
      );
      this.handleRemoveTabList(this.checkedleft, this.equipmentInfo);
      this.checkedleft = [];
    },
    //移入迭代
    remove(arr) {
      let Arry = [];
      arr.forEach((item) => {
        Arry.push(item.id);
      });
      this.$http({
        method: "post",
        url: `userStory/notStartUserStoryToSpurt?arr=${Arry}&spurtId=${this.rows.id}`,
      }).then(({ data }) => {
        if (data.flag) {
          this.$message(
            {
              message: "添加成功",
              type: "success",
            },
            this.sucess()
          );
          this.reload1();
        } else {
          console.log(data);
        }
      });
    },
    //移出当前迭代迭代
    Toremove(arr) {
      let Arry = [];
      arr.forEach((item) => {
        Arry.push(item.id);
      });
      this.$http({
        method: "post",
        url: `userStory/userStoryToNotSpurt?arr=${Arry}`,
      }).then(({ data }) => {
        if (data.flag) {
          this.$message(
            {
              message: "移出成功",
              type: "success",
            },
            this.sucess()
          );
          this.reload1();
        } else {
          console.log(data);
        }
      });
    },
    //将数据移动到左边
    PutDataToLeft() {
      this.remove(JSON.parse(JSON.stringify(this.rcheckedleft)));
      this.equipmentInfo = this.handleConcatArr(
        this.equipmentInfo,
        this.rcheckedleft
      );
      this.handleRemoveTabList(this.rcheckedleft, this.requipmentInfo);
      this.rcheckedleft = [];
    },

    handleConcatArr(selectArr, nowSelectData) {
      let arr = [];
      arr = arr.concat(selectArr, nowSelectData);
      return arr;
    },
    handleRemoveTabList(checkArr, originalArr) {
      for (const item of checkArr) {
        if (originalArr.indexOf(item) > -1) {
          this.$nextTick(() => {
            originalArr.splice(originalArr.indexOf(item), 1);
          });
        }
      }
    },
  },
  mounted() {
    //展示的是所有未加入的用户故事
    this.$http({
      method: "post",
      url: `userStory/selectAllNotStartUserStory`,
    }).then(({ data }) => {
      if (data.flag) {
        this.requipmentInfo = data.data;
      } else {
        console.log(data);
      }
    });
  },
};
</script>
<style lang="less" scoped>
.suceess {
  color: rgb(92, 91, 91);
  text-decoration: line-through #000;
}
.usereq::-webkit-scrollbar {
  display: none;
}
.usereq {
  overflow: auto;
  height: 100%;
  margin-top: 10px;
  .form-row {
    margin: 20px 0 !important;
  }
  .grid-content,
  .grid-Prohibit {
    text-align: center;
    color: #000;
    font-size: 16px;
    border-radius: 4px;
    min-height: 36px;
  }
  .grid-Prohibit {
    color: #414346;
  }
  .grid-content /deep/.el-checkbox__label {
    font-size: 16px;
  }
  .left_content {
    position: relative;
    padding: 0 20px 20px 20px;
    background: rgba(255, 255, 255, 0.7);

    border-radius: 5px;
  }
  .center_content {
    height: 190px;
    border-radius: 5px;
  }
  .el-select,
  /deep/ .form-input--small .form-input__inner {
    color: #616b80;
    width: 100%;
    background: #152841;
    border-color: #152841;
    border-radius: 5px;
  }
  /deep/ .el-checkbox-group .el-checkbox__label {
    display: none;
  }
  .able_checkbox /deep/ .el-checkbox__inner {
    border-color: #000;
  }
  .prohibit_checkbox /deep/.el-checkbox__inner {
    border-color: #414346;
    background: skyblue;
  }
  .center {
    text-align: center;
  }
  .center_content_r {
    width: 75%;
    height: 180px;
  }
  .rule_btn {
    width: 100px;
    height: 35px;
    background: #152841;
    float: left;
    border: none;
  }
  .rule_btn_left,
  .rule_btn_right {
    position: absolute;
    background: rgb(40, 151, 255);
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
  }
  .rule_btn_left {
    top: 10px;
    left: 40%;
    z-index: 999;
  }
  .rule_btn_right {
    top: -10px;
    right: 40%;
    z-index: 999;
  }
  .rule_btn_left:hover,
  .rule_btn_right:hover {
    background: #1e3a5f;
  }
}
</style>